<template>
	<view class="login-container">
		<view class="app-title">Mars Stone Phone Login</view>
		<view class="login-tabs">
			<view :class="['tab', loginType==='code'?'active':'']" @tap="loginType='code'">Code Login</view>
			<view :class="['tab', loginType==='password'?'active':'']" @tap="loginType='password'">Password Login</view>
		</view>
		<view class="form">
			<view class="form-input">
				<span class="input-prefix">+86</span>
				<input class="input" type="text" v-model="phone" placeholder="Please enter phone number" maxlength="11" />
			</view>
			<view v-if="loginType==='password'" class="form-input">
				<uni-icons class="input-prefix" type="locked" size="25"></uni-icons>
				<input class="input" type="password" v-model="password" placeholder="Please enter password" />
			</view>
			<view v-else>
				<view class="code-row">
					<div class="form-input">
						<input class="input code-input" type="text" v-model="code" placeholder="Please enter verification code" maxlength="6" />
					</div>
					<button class="code-btn" :disabled="codeTime>0"
						@tap="getCode">{{ codeTime>0 ? codeTime+'s' : 'Get Code' }}</button>
				</view>
			</view>
			<view class="protocol-row">
				<checkbox :checked="checked" @tap="checked=!checked" /> 
				<text class="protocol-text">I have read and agree to</text>
				<text class="protocol-link" @tap="showProtocol('user')">User Agreement</text>
				<text class="protocol-text">and</text>
				<text class="protocol-link" @tap="showProtocol('privacy')">Privacy Policy</text>
			</view>
			<button class="login-btn" :disabled="!canLogin" @tap="onLogin">Login</button>
		</view> 
		<uni-popup ref="popup" type="center">
			<view class="popup-content">
				<view class="popup-title">{{ popupType==='user'?'User Agreement':'Privacy Policy' }}</view>
				<scroll-view scroll-y style="max-height:400rpx;">
					<text>{{ popupType==='user'? userProtocol : privacyProtocol }}</text>
				</scroll-view>
				<button class="popup-btn" @tap="closePopup">Got it</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loginType: 'code',
				phone: '',
				password: '',
				code: '',
				codeTime: 0,
				checked: false,
				popupType: 'user',
				userProtocol: `【User Agreement】

Welcome to register as a Mars Stone App user! Before using this App, please read and agree to this agreement carefully. Registering, logging in, or using this App indicates that you have fully read, understood, and agreed to all the contents of this agreement.

1. Account Registration and Use
- You need to register an account using your valid phone number and ensure that the information provided is true, accurate, and complete.
- You should properly keep your account and password, and not transfer or lend your account and password to others. Losses caused by account information leakage due to your own reasons shall be borne by you.
- If you discover that others are using your account without authorization, please notify us immediately.

2. Service Content
- Mars Stone App provides you with services such as browsing, publishing, commenting, liking, and collecting short drama videos. The specific features are subject to actual availability.
- We have the right to adjust the service content according to business development and will announce it in advance within the App.

3. User Behavior Standards
- You promise to comply with national laws and regulations and not use this App to produce, upload, or spread illegal, infringing, vulgar, violent, or other content.
- You shall not interfere with the normal operation of the App, or engage in malicious registration, volume brushing, server attacks, or other behaviors.
- For behaviors that violate laws, regulations, or this agreement, Mars Stone has the right to suspend or terminate services and reserve the right to pursue legal responsibility.

4. Intellectual Property Rights
- The content within Mars Stone App (including but not limited to text, pictures, audio and video, interface design, etc.) is protected by law and may not be used without authorization.
- For content uploaded by users, users should ensure they have legal rights and authorize Mars Stone to display and distribute it within the App.

5. Disclaimer
- Mars Stone App is committed to providing users with quality services, but does not guarantee that services will not be interrupted or error-free.
- Mars Stone is not responsible for service interruptions, data loss, etc. caused by force majeure or third-party reasons.

6. Agreement Changes
- Mars Stone has the right to modify this agreement as needed, and the changed content will be announced in the App. If you do not agree with the changed content, you may stop using this App.

7. Legal Application and Dispute Resolution
- This agreement applies to the laws of the People's Republic of China. Disputes arising from this agreement shall be resolved through friendly negotiation between the parties. If negotiation fails, it shall be submitted to the people's court with jurisdiction in the location of Mars Stone Company.

【End】`,
			privacyProtocol: `【Privacy Policy】

Mars Stone App attaches great importance to your personal information and privacy protection. Please read this policy carefully before using this App to understand how we collect, use, store, and protect your information.

1. Information Collection
- We will collect information you actively fill in, such as phone number, nickname, gender, avatar, etc., during your registration and use of the service.
- During your use of the App, we may collect device information, log information, location information (if you authorize it), etc., to improve service experience and security.
- If you log in using a third-party account, we will obtain relevant information based on your authorization.

2. Information Use
- Your personal information will be used for account registration, identity verification, service push, content recommendation, user interaction, customer service, and other scenarios.
- We will not use your personal information for other purposes not specified in this policy unless we obtain your prior consent.

3. Information Sharing and Disclosure
- We will not disclose or transfer your personal information to any unrelated third party unless we obtain your explicit consent or are required by laws and regulations.
- We may disclose your information in the following circumstances: in accordance with laws and regulations, as required by judicial authorities or authorized agencies, to safeguard national security, public interest, etc.

4. Information Storage and Protection
- Your personal information will be stored within the territory of the People's Republic of China, and multiple security measures will be taken to protect your information from leakage, damage, tampering, or loss.
- In the event of an information security incident, we will promptly notify you and report it in accordance with the law.

5. Protection of Minors
- Minors under the age of 18 should use this App under the guidance of their guardians. We will not actively collect information from minors. If we discover that a minor has registered, we will take measures to delete it.

6. Your Rights
- You have the right to access, correct, delete your personal information at any time, and the right to withdraw authorization or cancel your account.
- If you have any questions or complaints, please contact us through customer service within the App.

7. Policy Changes
- If this privacy policy is updated, we will announce it in the App. Major changes will be notified to you in a prominent manner.

【End】`,
			};
		},
		computed: {
			canLogin() {
				if (!this.checked) return false;
				if (!/^1[3-9]\d{9}$/.test(this.phone)) return false;
				if (this.loginType === 'password') return this.password.length >= 6;
				return this.code.length === 6;
			}
		},
		methods: {
			getCode() {
				if (!/^1[3-9]\d{9}$/.test(this.phone)) {
					uni.showToast({
						title: 'Please enter correct phone number',
						icon: 'none'
					});
					return;
				}
				this.codeTime = 60;
				const timer = setInterval(() => {
					this.codeTime--;
					if (this.codeTime <= 0) clearInterval(timer);
				}, 1000);
				// 这里应调用后端接口发送验证码
				uni.showToast({
					title: 'Verification code sent',
					icon: 'success'
				});
			},
			onLogin() {
				if (!this.canLogin) return;
				// 这里应调用后端登录接口
				uni.showToast({
					title: 'Login successful',
					icon: 'success'
				});
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/index/index'
					});
				}, 800);
			},
			showProtocol(type) {
				if(type==='user'){
					uni.navigateTo({ url: '/pages/login/user-protocol' });
				}else{
					uni.navigateTo({ url: '/pages/login/privacy-policy' });
				}
			},
			closePopup() {
				this.$refs.popup.close();
			} 
		}
	}
</script>

<style lang="scss" scoped>
	.login-container {
		width: 90vw;
		margin: 0 auto;
		padding-top: 80rpx;
		background: #121212;
		min-height: 100vh;

		.logo {
			width: 120rpx;
			height: 120rpx;
			margin-bottom: 20rpx;
			border-radius: 24rpx;
			box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.3);
		}

		.app-title {
			font-size: 38rpx;
			color: #ccc;
			font-weight: bold;
		}

		.login-tabs {
			display: flex;
			margin: 32rpx 0;

			.tab {
				flex: 1;
				text-align: center;
				font-size: 32rpx;
				padding: 16rpx 0;
				color: #666;
				border-bottom: 4rpx solid transparent;
				transition: all 0.2s;

				&.active {
					color: #FE2B54;
					border-bottom: 4rpx solid #FE2B54;
					font-weight: bold;
				}
			}
		}

		.form {
			display: flex;
			flex-direction: column;
			gap: 24rpx;

			.form-input {
				display: flex;
				background: #1e1e1e;
				height: 50px;
				line-height: 50px;
				border-radius: 18rpx;

				.input-prefix {
					color: #ccc;
					padding: 0 20rpx;
				}

				.input {
					height: 100%;
					border-radius: 18rpx;
					padding: 0 28rpx;
					font-size: 30rpx;
					border: none;
					margin-bottom: 0;
					box-shadow: none;
					color: #ccc;
					background: #1e1e1e;
				}
			}

			.code-row {
				display: flex;
				align-items: center;
				.code-input {
					flex: 1;
				}

				.code-btn {
					min-width: 140rpx;
					height: 40px;
					background: #FE2B54;
					line-height: 40px;
					color: #fff;
					border-radius: 18rpx;
					font-size: 28rpx;
					border: none;
					box-shadow: none;
				}
				 
			}

			.protocol-row {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				margin: 8rpx 0 0 0;

				.protocol-text {
					color: #666;
					margin: 0 4rpx;
				}

				.protocol-link {
					color: #FE2B54;
					margin: 0 2rpx;
				}
			}

			.login-btn {
				width: 100%;
				height: 88rpx;
				color: #fff;
				border-radius: 22rpx;
				font-size: 32rpx;
				font-weight: bold;
				margin-top: 12rpx; 
				background: #FE2B54;
			}

			.login-btn[disabled=true] {
				opacity: .5;
			}
		}

		.other-row {
			display: flex;
			justify-content: space-between;
			width: 80vw;
			margin: 32rpx 0 0 0;

			.other-link {
				color: #FE2B54;
				font-size: 26rpx;
			}
		}

		// 协议弹窗样式
		.popup-content {
			background: #1e1e1e;
			border-radius: 18rpx;
			padding: 40rpx 32rpx 24rpx 32rpx;
			width: 600rpx;
			width: 100vw;
			height: 100vh;

			.popup-title {
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 24rpx;
				color: #ccc;
				text-align: center;
			}

			.popup-btn {
				width: 100%;
				margin-top: 32rpx;
				background: #FE2B54;
				color: #fff;
				border-radius: 12rpx;
				font-size: 28rpx;
				border: none;
			}
		}
	}
</style>